<template>
  <div class="article-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form :model="SearchArticle" ref="SearchArticle" >
          <div class="filter-container">
            <el-row :gutter="20">
              <el-col :span="5">
                <!-- 目录名称输入框 -->
                <el-form-item label="关键字" prop="keyword">
                  <el-input
                    style="width: 180px;"
                    class="filter-item"
                    v-model="SearchArticle.keyword"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                 <!-- 状态下拉选择框 -->
                 <el-form-item label="状态" prop="state">
                  <el-select v-model="SearchArticle.state" placeholder="请选择">
                     <el-option
                       v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                   </el-option>
                 </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="1" :pull="1">
                  <el-button
                  class="filter-item"
                  size="small"
                    @click="clearFn"
                  >清除</el-button>
              </el-col>
              <el-col :span="1" :pull="1">
                 <el-button
                    size="small"
                    type="primary"
                      @click="SearchTagsFn"
                  >搜索</el-button>
              </el-col>
                <el-button
              class="filter-item fr"
              size="small"
              type="success"
              icon="el-icon-edit"
              @click="addDialog=true"
            >新增目录</el-button>
            </el-row>
          </div>
        </el-form>
        <!-- 数据记录 -->
         <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- 数据列表 -->
        <el-table
          :data="dataList"
          v-loading="listLoading"
          element-loading-text="加载中，请稍后..."
          fit
          highlight-current-row
          style="width: 100%"
          border
        >
          <el-table-column align="center" label="序号" type="index">
          </el-table-column>
          <el-table-column align="center" label="文章标题">
            <template slot-scope="scope">
              <span>{{scope.row.title}}</span>
               <a v-if="scope.row.videoURL" href="#" class="el-icon-film" @click="showVideoFn(scope.row.videoURL)"></a>
            </template>
          </el-table-column>
          <el-table-column align="center" label="阅读数">
            <template slot-scope="scope">
              <span>{{scope.row.visits}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入人">
            <template slot-scope="scope">
              <span>{{scope.row.creatorID}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入时间">
            <template slot-scope="scope">
              <span>{{scope.row.createTime}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state==1">已启用</span>
              <span v-else>禁用</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            width="280"
          >
             <template slot-scope="scope">
               <el-button
               type="text"
               size="mini"
               @click="buttonOneFn(scope.row.id)"
               >预览</el-button>
                <el-button type="text" size="mini"
                 @click="buttonTwoFn(scope.row.id,scope.row.state)">
                <span v-if="scope.row.state==0">启用</span>
                <span v-else>禁用</span>
              </el-button>
              <el-button
               type="text"
               size="mini"
               @click="buttonThreeFn(scope.row.id)"
               :disabled="scope.row.state?true:false">修改</el-button>
              <el-button
                size="mini"
                type="text"
                @click="buttonFourFn(scope.row.id)"
                :disabled="scope.row.state?true:false"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
         <!-- 分页 -->
        <div class="pagination" style="float:right">
          <div class="pages">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="Number(page.page)"
              :total="Number(total)"
              :page-size="Number(page.pagesize)"
              :page-sizes="[10,20,30,50]"
              layout="sizes, prev, pager, next, jumper"
            ></el-pagination>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 文章预览弹层 -->
    <ArticlePreview ref="ArticlePreview" :showDialog.sync="ArticlePreviewshowDialog"/>
    <!-- 文章新增修改弹层 -->
    <ArticleAdd ref="ArticleAdd" :addDialog.sync="addDialog" @update="list()"/>
    <!-- 视频播放 -->
    <div v-if="showVideo" class="video-preview">
      <div class="close" @click="showVideo=false">
        <span class="el-icon-close"></span>
      </div>
      <div class="box">
         <video :src="VideoURL" controls autoplay loop></video>
      </div>
    </div>
  </div>
</template>

<script>
// 引入接口  1.文章列表2.文章状态修改 3.删除文章
import { list, changeState, remove } from '../../api/hmmm/articles'
// 引入组件 预览文章  新增修改文章
import ArticlePreview from '../components/articles-preview.vue'
import ArticleAdd from '../components/articles-add.vue'
export default {
  name: 'ArticlesList',
  data () {
    return {
      // 搜索框表单
      SearchArticle: {
        keyword: null, // 关键字
        state: null// 状态
      },
      // 表格数据
      dataList: [],
      // 表格数据加载状态
      listLoading: false,
      // 分页数据
      page: {
        page: 1, // 当前页数
        pagesize: 10// 页尺寸
      },
      total: '', // 数据总数
      // 标签状态:
      options: [{
        value: 1,
        label: '已启用'
      }, {
        value: 0,
        label: '禁用'
      }],
      ArticlePreviewshowDialog: false, // 文章预览弹层
      addDialog: false, // 新增修改文章弹层
      showVideo: false, // 播放视频层展示隐藏
      VideoURL: ''// 当前视频地址
    }
  },
  computed: {
    // 数据记录
    alertText () {
      return `数据一共${this.total}条`
    }
  },
  components: {
    ArticlePreview,
    ArticleAdd
  },
  created () {
    this.list()// 数据渲染
  },
  methods: {
    // 数据渲染的函数
    async list () {
      // 开启加载状态
      this.listLoading = true
      try {
      // 调接口
        const { data } = await list({ ...this.page, ...this.SearchArticle })
        console.log(data)
        // 数据更新
        this.dataList = data.items
        this.total = data.counts
      } catch (err) {
        this.$message.waring(err)
      }
      // 关闭加载状态
      this.listLoading = false
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      // pageSize 改变时会触发 回调参数：每页条数 再重新设置size
      this.page.pagesize = val
      if (this.page.page === 1) {
        this.list()// 更新视图
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      // currentPage 改变时会触发 回调参数:当前页 重新设置当前页
      this.page.page = val
      this.list()// 更新视图
    },
    // 清除按钮
    clearFn () {
      // 重置搜索数据
      this.SearchArticle = {
        keyword: null,
        state: null
      }
      // 重置页数
      this.page = {
        page: 1,
        pagesize: 10
      }
      // 重新调所有数据
      this.list()
    },
    // 搜索按钮
    SearchTagsFn () {
      // 重置页数回到第一页
      this.page = {
        page: 1,
        pagesize: 10
      }
      this.list()// 重新调接口
    },
    // 点击操作栏第一个按钮 预览
    buttonOneFn (id) {
      this.$refs.ArticlePreview.getArticlesDetail(id)
      // 开启弹窗
      this.ArticlePreviewshowDialog = true
    },
    // 点击操作栏的第二个按钮  禁用或者启用
    async buttonTwoFn (id, state) {
      // 接受每条数据的id state 调接口进行修改
      const mes = state ? '禁用' : '启用'
      try {
        await this.$confirm(`您确定要${mes}该文章吗？`)
        const { data } = await changeState({ id, state: state ? '0' : '1' })
        data.success ? this.list() : this.$message.waring(`${mes}失败`)
      } catch (err) {
        console.log(err)
      }
    },
    // 点击操作栏的第三个按钮 修改文章
    async buttonThreeFn (id) {
      // 1.调用子组件方法 回调数据
      await this.$refs.ArticleAdd.editRole(id)
      // 2.打开弹层
      this.addDialog = true
    },
    // 点击操作栏的第四个按钮  删除标签
    async buttonFourFn (id) {
      await this.$confirm('此操作将永久删除文章 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
      // 调接口
      await remove({ id })
      // 更新视图
      this.list()
    },
    // 视频播放函数
    showVideoFn (url) {
      // 将当前视频地址存放起来
      this.VideoURL = url
      // 开启视频播放模块展示
      this.showVideo = true
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin:10px 0;
}
.fr{
  float: right;
  margin-right: 10px;
}
.el-icon-film{
  color: #00f;
  font-size: 18px;
}
.video-preview{
  position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    overflow: hidden;
    z-index: 9999;
}
.close{
  width: 50px;
    height: 50px;
    position: absolute;
    top: 30px;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    background: rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 5px rgb(0 0 0 / 40%);
    box-shadow: 0 0 5px rgb(0 0 0 / 40%);
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
}
.box{
  width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.box video{
  width: 100%;
    height: 100%;
}
</style>
